<!DOCTYPE html>
<html style="height: 100%">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>评分明细</title>
		<link rel="shortcut icon" href="../../images/my/favicon.ico" />
		<link rel="bookmark" href="../../images/my/favicon.ico" />
		<link rel="stylesheet" href="../../statics/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/admin/common.css" />
		<link rel="stylesheet" href="../../css/admin/admin_list.css" />
	</head>
	<script type="text/javascript" src="graphUtils/echarts.min.js">
	</script>

	<body style="height: 100%; margin: 0;overflow:hidden">
		<div class="layui-form-item layui-form" pane="">
			<div class="layui-input-block">

				<span class="btn_right">
								<button lay-submit="" lay-filter="tea" class="layui-btn layui-btn-radius layui-btn-xs layui-btn-danger" style="width:75px;font-size: 14px;">
									<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #FFF;"></i>  教师</button>								
												
								<button type="button" id="back" title="返回" class="layui-btn layui-btn-normal layui-btn-xs" onclick="javascript:window.history.back(-1);"><i class="layui-icon">&#xe65c;</i>返回</button>
								<button type="button" id="refresh" title="刷新" class="layui-btn layui-btn-normal layui-btn-xs"><i class="layui-icon layui-icon-refresh"></i></button>
							</span>

			</div>
		</div>
		<div class="layui-row" style="height: 100%;">

			<div class="layui-card-body" style="height: 100%;">

				<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
				<div id="container" style="height: 90%"></div>
			</div>
		</div>
		<script type="text/javascript" src="../../statics/layui/layui.js"></script>
		<script type="text/javascript" src="../../statics/lay/system/admin/public.js"></script>

		<script type="text/javascript" src="js/dataDisplay.js"></script>
		<script>
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('container'));

			//题目
			var subjectData = new Array();

			//分数出现的次数
			var times_1 = new Array();
			var times_2 = new Array();
			var times_3 = new Array();
			var times_4 = new Array();

			layui.use(['form', 'rate', 'layer'], function() {

				var rate = layui.rate,
					form = layui.form,
					layer = layui.layer;
				var $ = layui.jquery;
				var isum = 1;
				var html;

				var tId = getUrlParam("tId"); // 获取上一页面传来的tid
				var cId = getUrlParam("cId"); // 获取上一页面传来的cid
				var tName = getUrlParam("tName"); // 获取上一页面传来的tName
				var tNo = getUrlParam("tNo"); // 获取上一页面传来的tName
				//监听指定开关
				form.on('submit(tea)', function(data) {
					layer.open({
						type: 2,
						title: false,
						closeBtn: 0,
						shadeClose: true,
						skin: 'yourclass',

						area: ['80%', '85%'],
						content: 'dataDisplayt.html?tIdTwo=' + tId + '&&cId=' + cId + '',

					});

				});

				var infodata = {
					tId: tId,
					cId: cId
				};

				layer.load();

				setTimeout(function() {
					layer.closeAll('loading');
				}, 800);

				//initData();
				fandMyfen(infodata);

				// 返回评价列表
				$("#layui-layer2 span .layui-layer-close").on('click', function() {
					parent.layer.closeAll();
					//parent.location.reload(); //刷新父页面
				})

				// 遍历解析Json
				function parseJson(JSONdata) {

					$.each(JSONdata.data, function(i, object) {
						subjectData[i] = object.subject;

						times_1[i] = object.times_1;
						times_2[i] = object.times_2;
						times_3[i] = object.times_3;
						times_4[i] = object.times_4;

					});

				}

				// 指定图表的配置项和数据

				option = {
					title: {
						text: '学生评教明细(' + tName + ':' + tNo + ')'
					},
					color: ['#B8B8B8', '#32CD32', '#1E90FF', '#e5323e'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['差强人意', '一般', '满意', '非常满意']
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						left: 'right',
						top: 'center',
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar', 'stack', 'tiled']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: true,
					xAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						data: subjectData,
						 name: '题号',
						    nameLocation: 'middle',
						    nameTextStyle: {      
							color: "red",
							       fontSize: 16,
							       padding: 10    
						}
					}],
					yAxis: [{
						type: 'value',
							name: '人数',
						    nameLocation: 'middle',
						    nameTextStyle: {      
							color: "red",
							       fontSize: 16,
							       padding: 10    
						}
					}],
					series: [{
							name: '差强人意',
							type: 'bar',
							barGap: 0,
							label: labelOption,
							data: times_1
						},
						{
							name: '一般',
							type: 'bar',
							label: labelOption,
							data: times_2
						},
						{
							name: '满意',
							type: 'bar',
							label: labelOption,
							data: times_3
						},
						{
							name: '非常满意',
							type: 'bar',
							label: labelOption,
							data: times_4
						}

					]
				};

				// 使用刚指定的配置项和数据显示图表。
				if(option && typeof option === "object") {
					myChart.setOption(option, true);
				}

				// 请求 分数
				function fandMyfen(infodata) {
					$.ajax({
						type: "POST",
						contentType: "application/json; charset=utf-8",
						url: IP + "/api/teacher_eav/scoresDetailed/scoresStuDetailed",
						data: JSON.stringify(infodata),
						dataType: "json",
						async: false,
						success: function(data) {
							//							layer.closeAll('loading');
							parseJson(data);
							console.log("success");
						}
					});
				}
			});
		</script>

	</body>

</html>